<!-- BOSS管理页面 -->
<template >
  <el-card style="border-radius: 5px">
    <template #header>
      <div class="card-header">
        <h3>BOSS列表</h3>
      </div>
    </template>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="普通BOSS" name="first">
        <div class="nav">
          <div class="search">
            <el-input
              v-model="input"
              class="search-input"
              placeholder="搜索BOSS名称"
              suffix-icon="search"
            />
          </div>

          <!-- 添加BOSS按钮 -->
          <el-button class="add-pets"
            ><el-icon style="margin-right: 5px"><Plus /></el-icon
            >添加普通BOSS</el-button
          >
        </div>
        <!-- BOSS名称列表 -->
        <el-table
          :data="bossTableData"
          style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column
            prop="name"
            label="宠物名称"
            width="200px"
            align="left"
          />
          <el-table-column
            prop="stats"
            label="属性"
            width="400px"
            align="center"
          />

          <el-table-column
            prop="controls"
            label="操作"
            width="500px"
            align="center"
            ><template #default="{ row }">
              <el-button
                style="background-color: rgb(87, 195, 194)"
                :icon="Edit"
                round
                @click="updateEco(row)" />

              <el-button
                style="background-color: rgb(238, 184, 195)"
                :icon="Delete"
                round
            /></template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            :total="1000"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /></div
      ></el-tab-pane>
      <el-tab-pane label="定制BOSS" name="second">
        <div class="nav">
          <div class="search">
            <el-input
              v-model="input"
              class="search-input"
              placeholder="搜索定制BOSS名称"
              suffix-icon="search"
            />
          </div>

          <!-- 添加定制BOSS按钮 -->
          <el-button class="add-pets"
            ><el-icon style="margin-right: 5px"><Plus /></el-icon
            >添加定制BOSS</el-button
          >
        </div>
        <!-- 定制BOSS名称列表 -->
        <el-table
          :data="divBossTableData"
          style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column
            prop="name"
            label="BOSS名称"
            width="100px"
            align="left"
          />
          <el-table-column
            prop="stats"
            label="属性"
            width="300px"
            align="center"
          />
          <el-table-column
            prop="shop"
            label="所属商户"
            width="300px"
            align="center"
          />

          <el-table-column
            prop="controls"
            label="操作"
            width="300px"
            align="center"
            ><template #default="{ row }">
              <el-button
                style="background-color: rgb(87, 195, 194)"
                :icon="Edit"
                round
                @click="updateEco(row)" />

              <el-button
                style="background-color: rgb(238, 184, 195)"
                :icon="Delete"
                round
            /></template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            :total="1000"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /></div
      ></el-tab-pane>
      <el-tab-pane label="已下架" name="third">
        <div class="nav">
          <div class="search">
            <el-input
              v-model="input"
              class="search-input"
              placeholder="搜索BOSS名称"
              suffix-icon="search"
            />
          </div>
        </div>
        <!-- BOSS名称列表 -->
        <el-table
          :data="delistTableData"
          style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column
            prop="name"
            label="BOSS名称"
            width="100px"
            align="left"
          />
          <el-table-column
            prop="stats"
            label="属性"
            width="300px"
            align="center"
          />
          <el-table-column
            prop="category"
            label="类别"
            width="300px"
            align="center"
          />

          <el-table-column
            prop="controls"
            label="操作"
            width="300px"
            align="center"
            ><template #default="{ row }">
              <el-button
                style="background-color: rgb(87, 195, 194)"
                :icon="Edit"
                round
                @click="updateEco(row)" />

              <el-button
                style="background-color: rgb(92, 174, 204)"
                :icon="Plus"
                round />
              <el-button
                style="background-color: rgb(238, 184, 195)"
                :icon="Delete"
                round
            /></template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            :total="1000"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /></div
      ></el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script setup>
import { ref } from "vue";
import { Delete, Edit, Plus } from "@element-plus/icons-vue";
//标签页导航栏
const activeName = ref("first");
// Boss相关数据
const bossTableData = [
  {
    name: "跳跳鼠",
    stats: "土",
  },
  {
    name: "大劲鹏",
    stats: "风",
  },
  {
    name: "金凤王",
    stats: "金",
  },
];
//定制BOSS相关数据
const divBossTableData = [
  {
    name: "七翅鸡",
    stats: "土",
    shop: "肯德基",
  },
  {
    name: "优优",
    stats: "风",
    shop: "优衣库",
  },
  {
    name: "热干面",
    stats: "金",
    shop: "老王热干面",
  },
];
// 已下架的BOSS数据
const delistTableData = [
  {
    name: "跳跳鼠",
    stats: "土",
    category: "普通",
  },
  {
    name: "大金鹏",
    stats: "风",
    category: "定制",
  },
  {
    name: "金风王",
    stats: "金",
    category: "普通",
  },
];
// 分页条相关
const currentPage = ref(5);
const pageSize = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = () => {};
const handleCurrentChange = () => {};
</script>
<style scoped>
.el-menu-item {
  margin-top: 30px;
  margin-right: 30px;
}

::v-deep(.el-tabs__active-bar) {
  background-color: rgb(44, 182, 156); /* 将激活状态下的下划线颜色设置为蓝色 */
}
.el-tabs__item,
.el-tabs__item:hover,
::v-deep(.el-tabs__item),
::v-deep(.el-tabs__item),
::v-deep(.el-tabs__item:hover),
::v-deep(.el-tabs__item.is-active) {
  color: rgb(44, 182, 156);
}
.search {
  float: left;
}
.search-input {
  float: left;
  width: 240px;
  height: 40px;
  border-radius: 0px !important;
}
.nav {
  margin-top: 30px;
  margin-bottom: 30px;
}
.add-pets,
.add-pets:hover {
  float: right;
  height: 35px;
  margin-right: 50px;
  color: white;
  background-color: rgb(44, 182, 156);
}
</style>